在webpack中配置CSS前缀神器Autoprefixer

您所在的位置：网站首页 › css 前缀 › 在webpack中配置CSS前缀神器Autoprefixer

在webpack中配置CSS前缀神器Autoprefixer

2023-04-29 02:13| 来源: 网络整理| 查看: 265

CSS兼容性前缀解决

为了满足浏览器的兼容，有的CSS属性需要对不同的浏览器加上前缀，Autoprefixer使用 Can I Use 的数据来决定哪些前缀是需要的。 Autoprefixer是一个后处理程序，不像 Sass 以及 Stylus 之类的预处理器。它适用于普通的 CSS，可以实现css3代码自动补全。也可以轻松跟 Sass，LESS及Stylus集成，在CSS编译前或编译后运行。其实用vue-cli构建的项目脚手架已经帮你把 autoprefixer 的配置做好了，自己不需要做什么改动就会自动加前缀。

在webpack中配置Autoprefixer 1. 安装autoprefixer： cnpm install autoprefixer --save-dev 复制代码 2. webpack.config.js中配置autoprefixer：

(1).引入autoprefixer：

const autoprefixer = require('autoprefixer'); 复制代码

(2).添加postcss-loader和插件配置：

{ loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ autoprefixer({ browsers: [ 'last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie> 8 ] }), ] } } 复制代码 a{ transition :transform 1s } 复制代码 a{ -webkit-transition :-webkit-transform 1s; transition :-ms-transform 1s; transition :transform 1s } 复制代码

注：另外webpack还有一个autoprefixer-loader，但npm官网已将其标为【deprecated】，推荐使用通过postcss-loader的方式使用autoprefixer。

3.安装postcss-cli

Autoprefixer其实是postcss的插件，见github.com/code42day/p…

Vue-cli配置

Vue CLI 内部使用了 PostCSS 所以只需要修改.postcssrc.js和.browserslistrc文件即可，没有的话新建文件

.postcssrc.js module.exports = { plugins: { "autoprefixer": {} } }; 复制代码 .browserslistrc > 1% last 2 versions not dead 复制代码

测试的时候可以把.browserslistrc改成最后20个版本，否则可能看不到效果，修改后需要重启

【本文地址】

在webpack中配置CSS前缀神器Autoprefixer

在webpack中配置CSS前缀神器Autoprefixer

今日新闻

推荐新闻